<!DOCTYPE html>
<html>
<head>
  <title>Picture-in-Picture iframe Test</title>
</head>
<body>
  <video controls preload=auto src='../bigbuck.webm'></video>
</body>
<script>
  const video = document.querySelector('video');

  async function enterPictureInPicture() {
    await _waitForMetadata();
    await video.requestPictureInPicture();
    return true;
  }

  function _waitForMetadata() {
    return new Promise(resolve => {
      if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
        resolve();
        return;
      }

      video.addEventListener('loadedmetadata', () => {
        resolve();
      }, { once: true });
    });
  }
</script>
</html>

